<template>
  <page title="教室结算表明细" has-back>
    <el-row justify="center">
      <el-col :span="16">
        <el-row justify="center">
          <h1>培训项目校内场地费用结算清单</h1>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="12">
            项目编号:{{form.project.uid}}
          </el-col>
          <el-col :span="12" style="text-align: end">
            {{form.classroomCheck.date}}
          </el-col>
        </el-row>
        <el-descriptions border :column="2">
          <el-descriptions-item label="项目名称" align="center" label-align="center" :span="2">{{form.project.name}}</el-descriptions-item>
          <el-descriptions-item label="培训人数" align="center" label-align="center">{{form.project.people}}</el-descriptions-item>
          <el-descriptions-item label="培训时间" align="center" label-align="center">{{form.project.startDate.substring(0,10)}}至{{form.project.endDate.substring(0,10)}}</el-descriptions-item>
          <el-descriptions-item label="承办部门" align="center" label-align="center">{{form.project.part.name}}</el-descriptions-item>
          <el-descriptions-item label="负责人" align="center" label-align="center">{{form.project.user.name}}</el-descriptions-item>
        </el-descriptions>
        <el-table :data="form.classroomUse" border header-cell-class-name="table-header">
          <el-table-column
              prop="name"
              header-align="center"
              align="center"
              :resizable="false"
              label="教室名">
          </el-table-column>
          <el-table-column
              prop="times"
              header-align="center"
              align="center"
              :resizable="false"
              label="使用次数">
          </el-table-column>
        </el-table>
        <el-row justify="center" style="margin-top: 100px;margin-bottom: 0">
          <el-button type="primary" plain @click="showDialog">修 改</el-button>
        </el-row>
      </el-col>
    </el-row>
  </page>
<!--修改的对话框-->
  <el-dialog
      title="教室使用情况修改"
      v-model="dialogVisible"
      width="30%">
    <el-table :data="addData" border header-cell-class-name="table-header">
      <el-table-column
          prop="classroom"
          header-align="center"
          align="center"
          :resizable="false"
          label="教室名">
        <template v-slot:default="scope">
          <template v-if="scope.row.editable">
            <edit-text v-model="scope.row.name"></edit-text>
          </template>
          <template v-else>
            {{scope.row.name}}
          </template>
        </template>
      </el-table-column>
      <el-table-column
          prop="times"
          header-align="center"
          align="center"
          :resizable="false"
          label="使用次数">
        <template v-slot:default="scope">
          <template v-if="scope.row.editable">
            <edit-text v-model="scope.row.times"></edit-text>
          </template>
          <template v-else>
            {{scope.row.times}}
          </template>
        </template>
      </el-table-column>
      <el-table-column
          :resizable="false"
          header-align="center"
          align="center"
          label="操作">
        <template #default="scope">
          <el-button
              type="text"
              @click="handleDelete(scope.$index, scope.row)" style="color: red">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="text" @click="addCheck">添加</el-button>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Page from "@/components/Page";
import EditText from "@/components/EditText";
import axios from "axios";
import moment from "moment";
export default {
  name: "ClassroomCheckInfo",
  components: {
    EditText,
    Page},
  data(){
    return{
      form:{
        project:{
          name: '',
          startDate: '',
          endDate: '',
          people: '',
          part: {

          },
          user: {

          },
        },
        classroomCheck:{
          date:''
        },
        classroomUse:[]
      },
      addData:[],
      dialogVisible:false,
    }
  },
  methods:{
    findByProjectId(id){
      return axios.get(this.$host+"/check/classroom/"+id).then((response)=>{
        if(response.data.code === 0){
          this.form = response.data.data;
          this.form.classroomCheck.date = moment(this.form.classroomCheck.date).format("YYYY年MM月")
          console.log(this.form)
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    updateClassroomUse(data){
      return axios.put(this.$host+"/check/classroom",data).then(response=>{
        if(response.data.code ===0){
          this.$message.success("修改成功");
          this.$router.replace("checkReport");
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    showDialog(){
      let arr1 = [];
      Object.assign(arr1,this.form.classroomUse);
      this.addData = arr1;
      this.dialogVisible = true;
    },
    addCheck(){
      this.addData.push({
        id:'',
        name:'',
        times:'',
        classroomCheckId:this.form.classroomCheck.id,
        editable:true,
      });
    },
    submit(){
      // let arr1 = [];
      // Object.assign(arr1,this.addData);
      // this.tableData = arr1;
      this.updateClassroomUse(this.addData).then(()=>{this.findByProjectId(this.$router.currentRoute.value.query.id)})
      this.dialogVisible = false;
    },
    handleDelete(index){
      this.addData.splice(index,1);
    }
  },
  created() {
    this.findByProjectId(this.$router.currentRoute.value.query.id);
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
</style>